<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
    <div class="pane">
        <p @click="play">Play</p><br/>
        <p @click="pause">Pause</p><br/>
        <p @click="cancel">Cancel</p><br/>
        <p @click="finish">Finish</p><br/>
        <p @click="speed(0.5)">0.5X</p><br/>
        <p @click="speed(1)">1X</p><br/>
        <p @click="speed(2)">2X</p><br/>
        <p @click="speed(4)">4X</p><br/>
        <span id="info">current info: </span><br/>
    </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {route, routeList} from "@/data/route"
import {ref} from "vue";

export default {
    name: "AddRoutePlay.component",
    components: {Maptalks},
    setup() {
        let player = ref(null), unitTime = ref(0)

        const play = () => {
            player.value.play();
        }

        const pause = () => {
            player.value.pause();
        }

        const finish = () => {
            player.value.finish();
        }

        const cancel = () => {
            player.value.cancel();
        }

        const speed = (t) => {
            player.value.setUnitTime(unitTime.value * t);
        }


        let mapOnLoadCB = (map) => {
            map.setZoom(14)

            player.value = new maptalks.RoutePlayer(route, map, {
                unitTime: 500,
                maxTrailLine: 10,
                lineOptions: {
                    symbol: {
                        lineWidth: 4,
                        lineColor: '#0dea0f',
                        // "markerFile": relative2path("6.png"),
                        // "markerPlacement": "point", //vertex, point, vertex-first, vertex-last, center
                        // "markerWidth": 33,
                        // "markerHeight": 43,
                    },
                    smoothness: 0.5,
                },
                walkedLineOptions: {
                    symbol: {
                        lineWidth: 4,
                        lineColor: '#ff0000',
                    },
                    smoothness: 0.5,
                }
            });
            unitTime.value = player.value.getUnitTime();

            // player.hideRoute();
            // player.hideTrail();

            player.value.on("playing", function (params) {
                if (player.value.getCurrentProperties(0) !== undefined && player.value.getCurrentProperties(0) !== null) {
                    $("#info").text(
                        "current info: " + player.value.getCurrentProperties(0).info
                    );
                }
                // 视野跟随当前marker移动
                // map.setCenterAndZoom(player.value.getCurrentCoordinates(), 14);
            });

            player.value.on("playfinish", function (params) {
                // MaptalksCommonService.setView(params.target.trailLinePoints)
            });

            player.value.play();
        }

        return {
            mapOnLoadCB, play, pause, finish, cancel, speed
        }
    }
}
</script>

<style scoped lang="less">
.pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 10;
    position: absolute;
    top: 20px;
    right: 20px;
    p {
        cursor: pointer;
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
}

</style>